//echart_1 人口性别比例
function echart_1() {
    var dom = document.getElementById("chart_1");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    app.title = '人口性别比例';
   
 option = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        color: ["#F58080", "#47D8BE"],
        data: ['总新增人口', '新生儿'],
        left: '30%',
        bottom: 'bottom',
        textStyle: {
                color: "#fff"
            }
    },
    grid: {
        top: 'middle',
        left: '3%',
        right: '4%',
        bottom: '3%',
        height: '80%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
        axisLine: {
            show: true,
            interval: 0, 
            lineStyle: {
                color: "#999",
                fontSize:12,
            }
        }
    },
    yAxis: {
        type: 'value',

        splitLine: {
            lineStyle: {
                type: 'dashed',
                color: '#333'
            }
        },
        axisLine: {
            show: false,
            lineStyle: {
                color: "#999"
            },
        },
        nameTextStyle: {
            color: "#999"
        },
        splitArea: {
            show: false
        }
    },
    series: [{
            name: '总新增人口',
            type: 'line',
            data: [300,500,420,530,460,389,500,220,430,500,420,630],
            color: "#F58080",
            lineStyle: {
                normal: {
                    width: 5,
                    color: {
                        type: 'linear',

                        colorStops: [{
                            offset: 0,
                            color: '#62f9f3' // 0% 处的颜色
                        }, {
                            offset: 0.4,
                            color: '#8487fb' // 100% 处的颜色
                        }, {
                            offset: 1,
                            color: '#86befd' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    },
                    shadowColor: 'rgba(134,190,253, 0.5)',
                    shadowBlur: 10,
                    shadowOffsetY: 7
                }
            },
            itemStyle: {
                normal: {
                    color: '#86befd',
                    borderWidth: 10,
                    /*shadowColor: 'rgba(72,216,191, 0.3)',
                     shadowBlur: 100,*/
                    borderColor: "#86befd"
                }
            },
            smooth: true
        },
        {
            name: '新生儿',
            type: 'line',
            data: [123,200,220,222,123,56,368,111,222,123,56,189],
            lineStyle: {
                normal: {
                    width: 5,
                    color: {
                        type: 'linear',

                        colorStops: [{
                                offset: 0,
                                color: '#AAF487' // 0% 处的颜色
                            },
                            {
                                offset: 0.4,
                                color: '#47D8BE' // 100% 处的颜色
                            }, {
                                offset: 1,
                                color: '#47D8BE' // 100% 处的颜色
                            }
                        ],
                        globalCoord: false // 缺省为 false
                    },
                    shadowColor: 'rgba(71,216,190, 0.5)',
                    shadowBlur: 10,
                    shadowOffsetY: 7
                }
            },
            itemStyle: {
                normal: {
                    color: '#AAF487',
                    borderWidth: 10,
                    /*shadowColor: 'rgba(72,216,191, 0.3)',
                     shadowBlur: 100,*/
                    borderColor: "#AAF487"
                }
            },
            smooth: true
        },
        
    ]
};

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
}

echart_1();



function echart_2() {
    var dom = document.getElementById("chart_2");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;

  

var chartData = [18,28,15,6];
var chartName = ['新生儿', '投靠亲人', '人才引进','其他'];
// var unit='亿元';
var myColor = ['#f6c1f6','#62fbf5','#85b4fb','#8689fe'];
option = {
    grid: {
        left: '-15%',
        right: '2%',
        bottom: '-5%',
        top: '2%',
        containLabel: true
    },
    xAxis: [{
            show: false,
        },
        {
            show: false,
        }
    ],
    yAxis: {
        type: 'category',
        inverse: true,
        show: false
    },

    series: [

        //亮色条 百分比
        {
            show: true,
            type: 'bar',
            barGap: '-100%',
            barWidth: '20%',
            z: 2,
            itemStyle: {
                normal: {
                    color: function(params) {
                        var num = myColor.length;
                        return myColor[params.dataIndex % num]
                    }
                }
            },
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        color: '#fff',
                        fontSize: 20,
                        fontWeight: 'bold'
                    },
                    position: 'right',
                    formatter: function(data) {
                        return (chartData[data.dataIndex]);
                    }
                }
            },
            data: chartData,
        },
        //年份
        {
            show: true,
            type: 'bar',
            xAxisIndex: 1, //代表使用第二个X轴刻度
            barGap: '-50%',
            barWidth: '10%',
            itemStyle: {
                normal: {
                    barBorderRadius: 20,
                    color: 'transparent'
                }
            },
            label: {
                normal: {
                    show: true,
                    position: [0, '-30'],
                    textStyle: {
                        fontSize:16,
                        color: '#fff',
                    },
                    formatter: function(data) {
                        return chartName[data.dataIndex];
                    }
                }
            },
            data: chartData
        }
    ]
};


    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
}

echart_2();

function echart_3() {
    var dom = document.getElementById("chart_3");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
  
 option = {
    backgroundColor: '',
    
    grid:{
                    left:'20',
                    right:'10',
                    bottom:'50',
                                  
                },

    tooltip: {
        show: false,
        formatter: "{b} <br> {c}%"

    },
    legend: {
        icon: "circle",
        bottom: '43%',
        left: '0%',
        itemWidth: 7,
        itemHeight: 7,
        itemGap: 40,
        textStyle: {
            color: '#89A7AF',
        },
        data: [{
                name: ''
            },
            {
                name: ''
            },
            // {
            //     name: '其他'
            // }
        ]
    },
    xAxis: [{
        type: 'value',
        axisTick: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        axisLabel: {
            show: false
        },
        splitLine: {
            show: false,
        }
    }],
    yAxis: [{
        //type: 'category',
        data: [''],
        axisTick: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        axisLabel: {
            textStyle: {
                color: '#fff',
            }
        }

    }],
    series: [{
            name: '男',
            type: 'bar',
            barWidth: 15,
            stack: '男',
            label: {
                normal: {
                    borderWidth: 10,
                    distance: 20,
                    align: 'center',
                    verticalAlign: 'middle',
                    borderRadius: 1,
                    borderColor: '#0667a9',
                    backgroundColor: '#0667a9',
                    show: true,
                    position: 'top',
                    formatter: '{c}%',
                    color: '#fff'
                }
            },
            itemStyle: {
                color: '#0667a9'
            },
            data: [{
                value: 53,
                itemStyle: {
                    normal: {
                        color: {
                            type: 'bar',
                            colorStops: [{
                                offset: 0,
                                color: '#0667a9' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#0667a9' // 100% 处的颜色
                            }],
                            globalCoord: false, // 缺省为 false

                        }
                    }
                }
            }]
        },
        {
            name: '男三角形',
            type: 'line',
            barWidth: 0,
            markPoint: {
                symbol: 'triangle',
                symbolRotate: '180',
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [{
                            offset: 0,
                            color: '#fff' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#fff' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    }
                },
                symbolSize: [6, 5], // 容器大小
                symbolOffset: [0, -15], //位置偏移
                data: [{
                    coord: [53/ 2]
                }],
                label: {
                    normal: {
                        show: false
                    },
                    offset: [0, 0],
                }
            }
        },
        {
            name: '女',
            type: 'bar',
            barWidth: 16,
            stack: '男',
            itemStyle: {
                color: '#E67C26'
            },
            label: {
                normal: {
                    borderWidth: 10,
                    distance: 20,
                    align: 'center',
                    verticalAlign: 'middle',
                    borderRadius: 1,
                    borderColor: '#d1a201',
                    backgroundColor: '#d1a201',
                    show: true,
                    position: 'top',
                    formatter: '{c}%',
                    color: '#fff'
                }
            },
            data: [{
                value: 47,
                itemStyle: {
                    normal: {
                        color: {
                            type: 'bar',
                            colorStops: [{
                                offset: 0,
                                color: '#d1a201' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#d1a201' // 100% 处的颜色
                            }],
                            globalCoord: false, // 缺省为 false

                        }
                    }
                }
            }]
        },
        {
            name: '女三角形',
            type: 'line',
            barWidth: 0,
            markPoint: {
                symbol: 'triangle',
                symbolRotate: '180',
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [{
                            offset: 0,
                            color: '#fff' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#fff' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    }
                },
                symbolSize: [6, 5], // 容器大小
                symbolOffset: [0, -15], //位置偏移
                data: [{
                    coord: [53.11 + 47 / 2]
                }],
                label: {
                    normal: {
                        show: false
                    },
                    offset: [0, 0],
                }
            }
        }
    ]
};
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
}
echart_3();


function echart_4() {
    var dom = document.getElementById("chart_4");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
  
 option = {
    backgroundColor: '',
    
    grid:{
                    left:'20',
                    right:'10',
                    bottom:'50',
                                  
                },

    tooltip: {
        show: false,
        formatter: "{b} <br> {c}%"

    },
    legend: {
        icon: "circle",
        bottom: '43%',
        left: '0%',
        itemWidth: 7,
        itemHeight: 7,
        itemGap: 40,
        textStyle: {
            color: '#89A7AF',
        },
        data: [{
                name: ''
            },
            {
                name: ''
            },
            // {
            //     name: '其他'
            // }
        ]
    },
    xAxis: [{
        type: 'value',
        axisTick: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        axisLabel: {
            show: false
        },
        splitLine: {
            show: false,
        }
    }],
    yAxis: [{
        //type: 'category',
        data: [''],
        axisTick: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        axisLabel: {
            textStyle: {
                color: '#fff',
            }
        }

    }],
    series: [{
            name: '男',
            type: 'bar',
            barWidth: 15,
            stack: '男',
            label: {
                normal: {
                    borderWidth: 10,
                    distance: 20,
                    align: 'center',
                    verticalAlign: 'middle',
                    borderRadius: 1,
                    borderColor: '#0667a9',
                    backgroundColor: '#0667a9',
                    show: true,
                    position: 'top',
                    formatter: '{c}%',
                    color: '#fff'
                }
            },
            itemStyle: {
                color: '#0667a9'
            },
            data: [{
                value: 55,
                itemStyle: {
                    normal: {
                        color: {
                            type: 'bar',
                            colorStops: [{
                                offset: 0,
                                color: '#0667a9' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#0667a9' // 100% 处的颜色
                            }],
                            globalCoord: false, // 缺省为 false

                        }
                    }
                }
            }]
        },
        {
            name: '男三角形',
            type: 'line',
            barWidth: 0,
            markPoint: {
                symbol: 'triangle',
                symbolRotate: '180',
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [{
                            offset: 0,
                            color: '#fff' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#fff' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    }
                },
                symbolSize: [6, 5], // 容器大小
                symbolOffset: [0, -15], //位置偏移
                data: [{
                    coord: [55 / 2]
                }],
                label: {
                    normal: {
                        show: false
                    },
                    offset: [0, 0],
                }
            }
        },
        {
            name: '女',
            type: 'bar',
            barWidth: 16,
            stack: '男',
            itemStyle: {
                color: '#E67C26'
            },
            label: {
                normal: {
                    borderWidth: 10,
                    distance: 20,
                    align: 'center',
                    verticalAlign: 'middle',
                    borderRadius: 1,
                    borderColor: '#d1a201',
                    backgroundColor: '#d1a201',
                    show: true,
                    position: 'top',
                    formatter: '{c}%',
                    color: '#fff'
                }
            },
            data: [{
                value: 45,
                itemStyle: {
                    normal: {
                        color: {
                            type: 'bar',
                            colorStops: [{
                                offset: 0,
                                color: '#d1a201' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#d1a201' // 100% 处的颜色
                            }],
                            globalCoord: false, // 缺省为 false

                        }
                    }
                }
            }]
        },
        {
            name: '女三角形',
            type: 'line',
            barWidth: 0,
            markPoint: {
                symbol: 'triangle',
                symbolRotate: '180',
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [{
                            offset: 0,
                            color: '#fff' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#fff' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    }
                },
                symbolSize: [6, 5], // 容器大小
                symbolOffset: [0, -15], //位置偏移
                data: [{
                    coord: [55 + 45 / 2]
                }],
                label: {
                    normal: {
                        show: false
                    },
                    offset: [0, 0],
                }
            }
        }
    ]
};
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
}
echart_4();
